<template>
  <view class="container">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-content">
        <text class="navbar-title">设备管理</text>
        <view class="navbar-actions">
          <uni-icons type="search" size="20" color="#FFFFFF" @click="showSearch"></uni-icons>
          <uni-icons type="more-filled" size="20" color="#FFFFFF" @click="showMenu"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 搜索栏 -->
    <view class="search-section" v-if="showSearchBar">
      <uni-search-bar 
        v-model="searchKeyword" 
        placeholder="搜索设备编号、名称" 
        @confirm="onSearch"
        @cancel="hideSearch"
        cancelButton="取消">
      </uni-search-bar>
    </view>

    <!-- 我的设备统计 -->
    <view class="stats-section">
      <uni-section title="我的设备" type="line">
        <uni-grid :column="3" :highlight="true">
          <uni-grid-item v-for="(item, index) in equipmentStats" :key="index">
            <view class="stat-item" @click="viewEquipmentType(item)">
              <view class="stat-icon">
                <uni-icons :type="item.icon" size="24" :color="item.color"></uni-icons>
              </view>
              <text class="stat-count">{{ item.count }}台</text>
              <text class="stat-label">{{ item.label }}</text>
            </view>
          </uni-grid-item>
        </uni-grid>
      </uni-section>
    </view>

    <!-- 主要功能区域 -->
    <view class="main-functions">
      <uni-section title="设备操作" type="line">
        <!-- 设备列表卡片 -->
        <uni-card 
          title="设备列表" 
          :extra="`今日出场${todayOutCount}台`"
          :note="'查看所有设备信息'"
          @click="navigateToEquipmentList"
          :is-shadow="true">
          <view class="card-content">
            <uni-icons type="list" size="32" color="#4980FF"></uni-icons>
            <text class="card-text">管理所有设备</text>
          </view>
        </uni-card>

        <!-- 操作按钮组 -->
        <view class="action-buttons">
          <uni-button 
            type="primary" 
            size="large" 
            @click="navigateToEquipmentEntry"
            :custom-style="{ backgroundColor: '#4ECDC4', borderColor: '#4ECDC4' }">
            <uni-icons type="plus" size="16" color="#FFFFFF"></uni-icons>
            设备进场
          </uni-button>
          
          <uni-button 
            type="primary" 
            size="large" 
            @click="navigateToEquipmentOut"
            :custom-style="{ backgroundColor: '#FF6B6B', borderColor: '#FF6B6B' }">
            <uni-icons type="minus" size="16" color="#FFFFFF"></uni-icons>
            设备出场
          </uni-button>
        </view>
      </uni-section>
    </view>

    <!-- 辅助功能区域 -->
    <view class="auxiliary-functions">
      <uni-section title="辅助功能" type="line">
        <uni-grid :column="2" :highlight="true" @change="onAuxiliaryFunctionClick">
          <uni-grid-item v-for="(item, index) in auxiliaryFunctions" :key="index">
            <view class="auxiliary-item">
              <view class="auxiliary-icon">
                <uni-icons :type="item.icon" size="28" :color="item.color"></uni-icons>
              </view>
              <text class="auxiliary-text">{{ item.text }}</text>
            </view>
          </uni-grid-item>
        </uni-grid>
      </uni-section>
    </view>

    <!-- 快捷操作 -->
    <view class="quick-actions">
      <uni-section title="快捷操作" type="line">
        <uni-list>
          <uni-list-item 
            v-for="(action, index) in quickActions" 
            :key="index"
            :title="action.title"
            :note="action.note"
            :showArrow="true"
            @click="executeQuickAction(action)">
            <template v-slot:header>
              <uni-icons :type="action.icon" size="20" :color="action.color"></uni-icons>
            </template>
          </uni-list-item>
        </uni-list>
      </uni-section>
    </view>

    <!-- 底部安全区域 -->
    <view class="safe-area-bottom"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showSearchBar: false,
      searchKeyword: '',
      todayOutCount: 100,
      equipmentStats: [
        { label: '挖掘机', count: 45, icon: 'gear', color: '#4980FF' },
        { label: '装载机', count: 32, icon: 'gear', color: '#4ECDC4' },
        { label: '推土机', count: 28, icon: 'gear', color: '#FF6B6B' },
        { label: '压路机', count: 15, icon: 'gear', color: '#FFA500' },
        { label: '起重机', count: 12, icon: 'gear', color: '#9B59B6' },
        { label: '其他设备', count: 68, icon: 'gear', color: '#95A5A6' }
      ],
      auxiliaryFunctions: [
        { text: '扫码加油', icon: 'fire', color: '#FFA500' },
        { text: 'OBD数据', icon: 'chart', color: '#45B7D1' }
      ],
      quickActions: [
        { title: '设备维护提醒', note: '查看需要维护的设备', icon: 'notification', color: '#FF6B6B' },
        { title: '设备状态监控', note: '实时监控设备运行状态', icon: 'eye', color: '#4ECDC4' },
        { title: '设备档案管理', note: '管理设备相关文档', icon: 'folder', color: '#4980FF' }
      ]
    }
  },
  methods: {
    showSearch() {
      this.showSearchBar = true
    },
    hideSearch() {
      this.showSearchBar = false
      this.searchKeyword = ''
    },
    onSearch() {
      uni.showToast({
        title: `搜索: ${this.searchKeyword}`,
        icon: 'none'
      })
    },
    showMenu() {
      uni.showActionSheet({
        itemList: ['刷新数据', '导出报表', '设置'],
        success: (res) => {
          switch(res.tapIndex) {
            case 0:
              this.refreshData()
              break
            case 1:
              this.exportReport()
              break
            case 2:
              this.openSettings()
              break
          }
        }
      })
    },
    viewEquipmentType(item) {
      uni.showToast({
        title: `查看${item.label}`,
        icon: 'none'
      })
    },
    navigateToEquipmentList() {
      uni.navigateTo({
        url: '/pages/equipment/list/index'
      })
    },
    navigateToEquipmentEntry() {
      uni.navigateTo({
        url: '/pages/equipment/entry/index'
      })
    },
    navigateToEquipmentOut() {
      uni.navigateTo({
        url: '/pages/equipment/out/index'
      })
    },
    onAuxiliaryFunctionClick(e) {
      const function_ = this.auxiliaryFunctions[e.detail.index]
      switch(function_.text) {
        case '扫码加油':
          uni.navigateTo({
            url: '/pages/equipment/refuel/index'
          })
          break
        case 'OBD数据':
          uni.navigateTo({
            url: '/pages/equipment/obd/index'
          })
          break
      }
    },
    executeQuickAction(action) {
      uni.showToast({
        title: `执行: ${action.title}`,
        icon: 'none'
      })
    },
    refreshData() {
      uni.showLoading({ title: '刷新中...' })
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '数据已刷新',
          icon: 'success'
        })
      }, 1000)
    },
    exportReport() {
      uni.showToast({
        title: '报表导出功能开发中',
        icon: 'none'
      })
    },
    openSettings() {
      uni.showToast({
        title: '设置功能开发中',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  background-color: #F5F7FA;
  min-height: 100vh;
}

.custom-navbar {
  background: linear-gradient(135deg, #4980FF 0%, #2B6BFF 100%);
  padding-top: 44px;
  padding-bottom: 16px;
}

.navbar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
}

.navbar-title {
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 600;
}

.navbar-actions {
  display: flex;
  gap: 16px;
}

.search-section {
  background-color: #FFFFFF;
  padding: 8px 16px;
  border-bottom: 1px solid #E5E5E5;
}

.stats-section {
  margin: 16px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 8px;
  gap: 8px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  background-color: rgba(73, 128, 255, 0.1);
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-count {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.stat-label {
  font-size: 12px;
  color: #666;
}

.main-functions {
  margin: 16px;
}

.card-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.card-text {
  font-size: 14px;
  color: #666;
}

.action-buttons {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.auxiliary-functions {
  margin: 16px;
}

.auxiliary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px;
  gap: 8px;
}

.auxiliary-icon {
  width: 56px;
  height: 56px;
  background-color: rgba(255, 165, 0, 0.1);
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auxiliary-text {
  font-size: 14px;
  color: #333;
  text-align: center;
}

.quick-actions {
  margin: 16px;
}

.safe-area-bottom {
  height: 34px;
}
</style>